<template>
	<view class="box">


		<view class="shang">

			<view class="test">
				地址簿
			</view>
			<picker mode="selector" :range="addressTypes" range-key="name" @change="onPickerChange">

				<image @click="tianjia" class="img2" src="../../../static/address/add.png" mode=""></image>
			</picker>



		</view>
		<view class="xia">
			<view class="xia-box" v-for="item in shuju" :key="item.id" @click="() => goBack(item)">
				<view class="test0">
					<image class="img3" src="../../../static/address/dingwei.png" mode=""></image>
					{{item.zanjduan[0].stationName}}
				</view>
				<view class="test1">
					{{item.zanjduan[0].stationProvince}}{{item.zanjduan[0].stationCity}}{{item.zanjduan[0].stationArea}}{{item.zanjduan[0].stationAddress}}
				</view>
				<view class="anniu">
					<view @click.stop="xx(item.id)" class="an0" style="text-align: right;">
						删除
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import {
		onTabItemTap,
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		http
	} from '../../../config/request.js';
	import {
		useuser
	} from '../../../stores/user.js';



	const loadingPlaces = ref([])
	const user = useuser();
	const shuju = ref([]);
	const cha = async () => {
		
		const shuju01 = await http({
			url: '/addressbook/cha/' + user.user.id, // 将 uid 作为查询参数传递
			method: 'get' // 默认就是 get 请求
		});
		shuju.value = shuju01.shuju;
		console.log(shuju.value);
	};
	const add = async (ex) => {
		var duixiang = {
			uid: user.user.id,
			zanjduanid: ex
		}
		console.log(duixiang)
		const a = await http({
			url: '/addressbook/add', // 将 uid 作为查询参数传递
			method: 'post', // 默认就是 get 请求
			data: duixiang
		})
		console.log(a)
		if (a.code == 20041) {
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			});
			cha();
		} else {
			uni.showToast({
				title: '地址已存在',
				icon: 'none'
			});
		}

	};

	const addressTypes = ref([]);
	// 从后端获取数据
	const fetchData = async () => {
		try {
			// 获取装货地和卸货地数据
			const res1 = await http({
				url: '/station/selectAll',
				method: 'GET'
			});
			console.log(res1)
			addressTypes.value = res1.shuju.map(item => ({
				name: item.stationName,
				id: item.id
			}));

		} catch (error) {
			console.error('获取数据失败:', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		}
	};


	// 下拉选择变化时触发
	const onPickerChange = (e) => {
		const index = e.detail.value;
		console.log(index);
		console.log('asssssssssssssssssssssssssssssssssssss')
		add(addressTypes.value[index].id);
	};

	const shanchu = async (id) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除该地址吗？',
			success: async (res) => {
				if (res.confirm) {
					const b = await http({
						url: '/addressbook/delete/' + id,
						method: 'get'
					});
					if (b.code == 20041) {
						uni.showModal({
							content: '删除成功',
							showCancel: false,
							confirmColor: '#4CAF50'
						});
						cha(); // 刷新地址列表
					} else {
						uni.showModal({
							content: '删除失败',
							showCancel: false,
							confirmColor: '#ff0000'
						});
					}
				} else {
					console.log('用户取消删除');
				}
			}
		});
	};


	//删除按钮
	const xx = (id) => {
		shanchu(id); // 确认后再删除
	}


	const pp = ref(0)
	const goBack = (item) => {
		if (pp.value == 1) {
			uni.setStorageSync('dizhi', item)
			uni.navigateBack({
				delta: 1,
			});
		}
	};
	onLoad((options) => {
		console.log(options.type);
		pp.value = options.type
	})

	onShow(() => {
		cha();
		fetchData();
	});
</script>

<style scoped lang="scss">
	.picker {
		padding: 20rpx;
		margin-top: 30rpx;
		border: 1px solid #ccc;
		border-radius: 8rpx;
		color: #333;
	}

	.box {
		display: flex;
		flex-direction: column;
		/* 垂直布局 */
		height: 100vh;
		/* 视口高度 */
		width: 100vw;
		/* 视口宽度 */
		background-color: #002fa7;

	}

	.picker-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.img3 {
		width: 35rpx;
		height: 35rpx;
	}

	.img2 {
		margin-left: 470rpx;
		margin-top: 33rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.test {
		margin-top: -10rpx;
		padding-left: 30rpx;
		color: #ffffff;
		font-size: 25px;
	}

	.shang {
		line-height: 70px;
		/* 设置行高等于盒子高度 */
		display: flex;
		height: 10%;
	}

	.xia {
		height: 90%;
		background-color: #eeeeee;
		border-radius: 20rpx 20rpx 0 0;
	}

	.xia-box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.anniu {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;

	}

	.test0 {
		font-size: 35rpx;
	}

	.test1 {
		color: #949494;
		margin-left: 40rpx;
	}

	.an0 {
		font-size: 28rpx;
		color: #ffffff;
		padding: 15rpx;
		border: 1px solid #0e4fc6;
		background-color: #0e4fc6 ;
		border-radius: 20rpx;
	}
</style>